<template>
	<view style="padding: 0 18px;">
		<view class="flex flex-row items-center" style="padding:0 10px;margin-top:31px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
			<u-input placeholder="" v-model="signupForm.phonenumber"><u--text text="手机号:" slot="prefix" margin="0 3px 0 0"></u--text></u-input>
		</view>
		<view class="flex flex-row items-center" style="padding:0 10px;margin-top:31px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
			<u-input placeholder="" v-model="signupForm.password">
				<u--text text="密 码:" slot="prefix" margin="0 3px 0 0"></u--text>
				<template slot="suffix">
					<u-icon name="eye-off" color="#444444" size="28"></u-icon>
				</template>
			</u-input>
		</view>
		<view class="flex flex-row items-center" style="margin-top:31px;">
			<view class="flex-1 flex flex-row items-center" style="padding-left:10px;height:53px;background-color: #F6F6F6;border-radius: 9px;">
				<u-input placeholder="" v-model="signupForm.code"><u--text text="验证码:" slot="prefix" margin="0 3px 0 0"></u--text></u-input>
			</view>
			<view class="flex flex-row justify-center items-center" style="color:#BB1512;width:100px;height:53px;">
				<!-- <u-code-input @change="change" @finish="finish"></u-code-input> -->
				<view @click="sendSignUpcode" v-show="show">获取验证码</view>
				<view class="register-msg-btn" v-show="!show">{{ count }} s</view>
			</view>
		</view>
		<u-button type="primary" text="注册" customStyle="margin-top:20px;height:53px;border-color:#FE7743;background: #FE7743;border-radius: 9px;" @click="userSignUp"></u-button>
		<view class="flex flex-row justify-evenly" style="margin-top:12px;">
			<view class="flex-1 flex justify-start" style="font-size: 14px;color: #000000;" @click="gologin">登录</view>
			<view class="flex-1 flex justify-end" style="font-size: 14px;color: #000000;" @click="goforgot">忘记密码</view>
		</view>
		<view style="margin-top:162px;font-size: 14px;color: #000000;">
			登录即表示您已阅读、理解并同意
			<text style="color:#FE7743;">《第1园区系统服务协议》</text>
			、
			<text style="color:#FE7743;">《第1园区系统隐藏保护政策》</text>
			，若您不同意协议或政策，请勿进行后续操作！
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
			timer: null,
			count: '',
			signupForm: {
				phonenumber: '',
				password: '',
				code: ''
			},
			NameShow: false,
			NameColumns: [],
			AreaShow: false,
			AreaColumns: [],
			FamilyShow: false,
			FamilyColumns: []
		};
	},

	methods: {
		// 发送验证码
		sendSignUpcode() {
			let that = this;
			if (this.signupForm.phonenumber == '') {
				return uni.$u.toast('请输入正确的手机号');
			}
			this.$apiCall.request(
				'post',
				'/sendcode',
				{ phonenumber: this.signupForm.phonenumber },
				{
					sucCb(data) {
						if (data.result === 1) {
							// this.resetTemp()
							uni.$u.toast('发送成功');
							that.getCode();
						} else {
							uni.$u.toast(data.msg);
						}
					}
				}
			);
		},
		getCode() {
			this.show = false;
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
				 	clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			}
		},
		// 注册
		userSignUp() {
			if (this.signupForm.phonenumber == '') {
				return uni.$u.toast('请输入正确的手机号');
			}
			if (this.signupForm.password == '') {
				return uni.$u.toast('请输入密码');
			}
			if (this.signupForm.code == '') {
				return uni.$u.toast('请输入验证码');
			}
			this.$apiCall.request('post', '/register', this.signupForm, {
				sucCb(data) {
					console.info(data);
					if (data.result === 1) {
						// this.resetTemp()
						uni.$u.toast('注册成功');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 1000);
					} else {
						uni.$u.toast(data.msg);
					}
				}
			});
		},

		goforgot() {
			uni.navigateTo({
				url: '/pages/forgotpasd/forgotpasd'
			});
		},
		gologin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style lang="scss"></style>
